import Page from "@/components/page";
import React, { useState } from "react";
import ImportGuide from "./importGuide";
import { billType } from "@/types";
import BillImportList from "./importList";
import Taro from "@tarojs/taro";
import { ShowToast } from "@/utils";
import PageNav from "@/components/pageNav";

import "./index.scss"

const ImportPage: React.FC = () => {

    const [pageType, setPageType] = useState<'list' | 'guide'>('guide')
    const [bills, setBills] = useState<billType[]>([])

    const uploadFinish = (list) => {
        if (list.length) {
            setBills(list)
            setPageType('list')
        } else {
            ShowToast('未解析到有效的账单数据')
        }
        
    }

    const deleteBill = (bill) => {
        Taro.showModal({
            title: '是否取消导入该账单？',
            content: '',
            success: (res: any) => {
                if (res.confirm) {
                    setBills(bills.filter(item => {
                        return item.id !== bill.id
                    }))
                }
            }
        })
    }

    return (
        <Page className="import-page flex-column safe-page page-background text-main-color">
            <PageNav showBack className="report-page-header need-filter">导入账单</PageNav>
            {
                pageType === 'guide' ?
                 <ImportGuide onFinish={uploadFinish}></ImportGuide>:
                 <BillImportList bills={bills} onDelete={deleteBill} onFinish={() => setPageType('guide')}></BillImportList>
            }
        </Page>
    )
}

export default ImportPage
